<template>
    <div >
      <div class="box container" v-for="item in list" :key="item.id">
        <h1 class="ttitle">
        <div>-{{item.name}}-</div>
        <div class="font"></div>
       </h1>
       <ul class="ul">
        <li class="li" v-for="i in item.goods" :key="i.id">
            <div class="imgBox">
                <img :src="i.picture" alt="" class="img">
            </div>
            <p class="desc ellipsis">{{ i.name }}</p>
            <p class="desc1 ellipsis">{{ i.desc }}</p>
            <p class="price">{{ i.price }}</p>
        </li>
       </ul>
      </div>
    </div>
</template>

<script>
    export default {
        props:{
            list:{
            type:Array,
            default:()=>[]
        }
        }
    }
</script>

<style lang="scss" scoped>
.box{
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px auto;
    .ttitle{
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        font-weight: 500;
        color: #999;
        text-align: center;
        .font{
            color: #999;
        }
    }
    .ul{
        display: flex;
        justify-content: space-around;
        li{
            width: 200px;
            height: 260px;
            .imgBox{
                width: 160px;
                height: 160px;
                margin: 0 auto;
                .img{
                    width: 160px;
                    height: 160px;
                }
            }
             p{
                width: 160px;
                margin: 0 auto;
                text-align: center;
             }
            .desc{
                font-size: 16px;
                margin-top:10px ;
            }
            .desc1{
                color: #999;
                font-size:14px ;
                margin-top:10px ;
                
            }
            .price{
                color: #f00;
                font-size: 16px;
                margin-top:10px ;
                font-weight: 600;
            }
        }
    }
}
</style>